<template>
  <div class="demo_charts">
    <h3>echarts</h3>
    <el-row>
      <el-col :span="12" :xs="24">
        <ChartBar/>
        <ChartPie/>
      </el-col>
      <el-col :span="12" :xs="24">
        <ChartLine/>
        <ChartRadar/>
      </el-col>
    </el-row>
    <h3>ApexChart</h3>
    <el-row>
      <el-col :span="12" :xs="24">
        <ApexChartArea/>
        <ApexChartBar/>
      </el-col>
      <el-col :span="12" :xs="24">
        <ApexChartLine/>
        <ApexChartMixed/>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import * as components from './src'
export default defineComponent({
  name: 'Democharts',
  components: components
})
</script>
<style lang="less" scoped>
.demo_charts {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>
